<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      @input="hInput"
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="seekbtn">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group v-if="suggestions.length">
      <van-cell
        v-for="(item, idx) in seekHighLight"
        :key="idx"
        icon="search"
        @click="hClickSuggetion(idx)"
      >
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />

      <van-cell
        v-for="(item, idx) in historys"
        :key="idx"
        :title="item"
        @click="$router.push('/search/result?keyword=' + item)"
      >
        <van-icon name="close" @click.stop="hDelHistory(idx)" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '../api/search'
import { heightLight } from '../utils/index'

import { setHistory, getHistory } from '../utils/storageHistory.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '',
      historys: getHistory() || [],
      suggestions: [], // 热搜关键词
      str: '<span style="color:red">abc</span>',
      startTime: 0
    }
  },
  computed: {
    seekHighLight () {
      // this.suggestions中的每一项都去做替换
      // suggestions中的每一项   ====> heightLight(suggestions中的每一项, this.keyword)
      return this.suggestions.map(item => {
        return heightLight(item, this.keyword)
      })
    }
  },
  methods: {
    hInput () {
      const dt = Date.now()
      if (dt - this.startTime > 800) {
        this.send()
        this.startTime = dt
      }
    },

    async send () {
      console.log(this.keyword)
      if (this.keyword === '') {
        this.suggestions = []
        return
      }
      try {
        const res = await getSuggestion(this.keyword)
        console.log(res)
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    },
    // 添加搜索历史
    addHistory (str) {
      // const idx = this.historys.findIndex(item => {
      //   if (item === this.keyword) {
      //     return true
      //   }
      // })s
      // if (idx !== -1) {
      //   this.historys.splice(idx, 1)
      // }
      // 1.是否有重复 有就删除
      const idx = this.historys.findIndex(item => item === str)
      if (idx > -1) {
        this.historys.splice(idx, 1)
      }
      // 2.添加在前面
      this.historys.unshift(str)
    },
    // 搜索按钮
    seekbtn () {
      this.addHistory(this.keyword)
      // 页面跳转
      this.$router.push('/search/result?keyword=' + this.keyword)
    },
    hClickSuggetion (idx) {
      this.addHistory(this.suggestions[idx])
      // 持久化
      setHistory(this.historys)
    },
    // 点击删除
    hDelHistory (idx) {
      this.historys.splice(idx, 1)
      // 持久化
      setHistory(this.historys)
    }
  }
}
</script>
